<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <!-- 1.引入 axios -->
    <script src="./js/axios.min.js"></script>
</head>

<body>
    <div id="app">
        {{msg}}

        <!-- 3.渲染数据 -->
        <ul>
            <li v-for="item in list" :key="item.productId">
                <div>
                    <img :src="item.proPicUrl" />
                    <div>❤{{item.collectionNum}}</div>
                </div>
                <div>
                    <div>{{item.proTitle}}</div>
                    <div>{{item.country}}</div>
                    <div>{{item.routingDat}}天{{item.routingNigth}}晚</div>
                    <div>{{item.amount}}元起</div>
                </div>
            </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "hello",
                list: [], //get接收猜你喜欢的数据
                // tuijian:[] //post接收数据 如果要这个空数据 上面的list也要重新改一下哦
            },

            mounted() {
                //2.在挂载后的钩子函数中获取数据 get方式
                // axios.get("http://www.51houniao.com/product/product/guessYouLike").then(res => {
                //     console.log(res);
                //     this.list = res.data;
                // })

                //2.在挂载后的钩子函数中获取数据 post方式
                axios.post("http://www.51houniao.com/product/product/getProductRecommendUser",{
                    desc: false,
                    orderBy: "TOP",
                    pageNow: 1,
                    pageSize: 200,
                }).then(res =>{
                    console.log(res);
                    this.list = res.data;
                    // this.tuijian = res.data;
                })
            }

        })

    </script>
</body>

</html>